iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

TypeScript 能手養成之旅系列 第 16

TypeScript 能手養成之旅 Day 16 類別(Class)

  • 分享至 

  • xImage
  •  

前言

在 ES6 中新增了 Class(類別),可以視為建構函式的語法糖,究竟是裹上怎樣的糖衣呢?讓我們今天來好好的了解一下。

基本概念

Class 的寫法很類似物件導向語言繼承的概念,可以想像我們使用 Class 製作一個模具,再利用這個模具來生產新的物件。

類別宣告

類別是由 建構函式屬性方法 組成的,如下:

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

const newPerson = new Person('cy', 28)
console.log(newPerson.getPersonalDetail()) //我是 cy 今年 28 歲

首先我們使用 class 來建立一個 Person 的模具,接下來我們使用這個模具來建立新的物件。

class Person {
  ...
}

而產出的物件我們希望可以客製化名稱和年齡,所以我們會在製作新物件時會一併告訴這個模具名字和年齡。

目的:

const newPerson = new Person('cy', 28)

因此我們需要建構函式和初始的屬性

class Person {
  // 初始化屬性
  name: string
  age: number

  // 建構函式
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

為了要驗證這個建立的新物件,是不是有按照我們需求。

const newPerson = new Person('cy', 28)
console.log(newPerson.getPersonalDetail()) //我是 cy 今年 28 歲

因此我們要新增一個驗證身份的方法 getPersonalDetail()

class Person {
  // 初始化屬性
  name: string
  age: number

  // 建構函式
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  
  // 驗證身份方法
  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

溫馨小提醒

其實三種元素都不是必須的,看我們的需求如何,如下:

class CallRuby {
  getRuby(){
    return 'Ruby'
  }
}

const printRuby = new CallRuby
console.log(printRuby.getRuby()) // Ruby

不過 屬性 是一定要透過 建構函式 來建立的。

Extends(擴展/繼承)

我們剛剛上面有提到如何用 class 來建立新的物件,接下來談論繼承這件事。
先來個比喻,我們都是人,但是我們會根據不同國家的人,而母語不同,但是我們都是人類。於是我們要繼承人類類別,來創立不同國家的人,例如: Taiwanese 人,母語:中文。

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

// 使用 extends 來進行繼承
class Taiwanese extends Person {
  language: string;

  constructor(name: string, age: number, language: string) {
    super(name, age) // 記得要使用 super 來去執行父層的 constructor
    this.language = language
  }
  
  getPersonalDetail(): string {
    return `${super.getPersonalDetail()} 語言: ${this.language}`
  }
}

const cy = new Taiwanese('cy', 28, 'Chinese')
console.log(cy.getPersonalDetail()) // 我是 cy 今年 28 歲 語言: Chinese

結語

class 如果有學習過物件導向程式語言,應該會很快理解,如果是沒有的人可能會多花一點時間,
其實仔細一看,跟昨天的 interface 好像有點相似,都是以物件的形式呈現,但兩者很大的不同在於 class 可以進行宣告以及將物件給實體化。

今天就先介紹到的,明天讓我們繼續努力囉!


上一篇
# TypeScript 能手養成之旅 Day 15 介面(Interface)
系列文
TypeScript 能手養成之旅16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言